<template>
  <div class="">
    <my-header>
      <span>{{ title }}</span>
    </my-header>
    <my-card
      v-for="(item, index) in result"
      :key="index"
      :item="item"
      @click="gotodetail(item.id)"
    />
  </div>
</template>

<script>
import { ref, reactive, toRefs } from "vue";
import { useStore } from "vuex";
import { useRouter, useRoute } from "vue-router";
import myHeader from "../components/myHeader.vue";
import myCard from "../components/myCard.vue";
import shops from "../../public/shops.json";
export default {
  setup(props, ctx) {
    const store = useStore();
    const router = useRouter();
    const route = useRoute();
    const data = reactive({
      result: [],
      //保存筛选的结果
    });
    // const title = route.query.title;
    const { title, lat, lng } = route.query;
    //把三个参数解构出来

    console.log(title, lat, lng);
    data.result = shops["34.751901,113.6663"];

    // data.result = shops[lat + "," + lng];

    //规范的应该根据经纬度拼接拿到对应的数据 也可以直接拿数据里的第一条数据 把数据固定

    const gotodetail = (id) => {
      console.log(11);
      router.push("/detail/" + id);
    };

    return { ...toRefs(data), title, gotodetail };
  },
  components: {
    myHeader,
    myCard,
  },
};
</script>

<style lang="scss"></style>
